<template>
  <div class="admin-user-tree" v-cloak>
    <x-border :title="title" name="icon-5333-beifen16" type="primary">
      <div slot="headerRight" class="headerRight">
        <el-input placeholder="请输入用户或手机号" v-model="keyword" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="init"></el-button>
        </el-input>
      </div>
      <div class="admin-user-tree_container" v-if="async">
        <el-tree :data="data" :props="defaultProps" :highlight-current="true" :load="loadNodeList" lazy></el-tree>
      </div>
      <div v-else v-loading="isLoading"></div>
    </x-border>
  </div>
</template>

<script>
  import './var.scss'
  import './styles'

  import ala from 'ala'
  export default {
    name: 'admin-user-tree',
    data () {
      return {
        async: false,
        widgetModel: {},
        keyword: '',
        title: '组织架构',
        data: [],
        defaultProps: {
          label: 'name',
          children: 'children'
        },
        expanded: [],
        isLoading: true,
        apiUrl: 'api/UserTree/GetUserTree'
      }
    },
    props: {
      widget: {}
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        this.isLoading = true

        var para = {
          id: this.$ala.urlId(),
          userName: this.keyword,
          isFirst: 'YES'
        }
        
        var route = ala.router()
        var type = route.query.type
        // 如果传进特别的type, 拿不同接口对应的Map数据
        if (type === 'contact') {
          this.apiUrl = 'api/UserTree/GetUserTreeContant'
        }

        var res = await this.$ala.httpGet(this.apiUrl, para)
        if (res) {
          this.widgetModel = res
        } else {
          this.keyword = ''
        }
        this.data = this.widgetModel
        this.async = true
        this.isLoading = false
      },
      async loadNodeList (node, resolve) {
        if (node.level === 0) {
          return resolve(this.data)
        }
        var val
        if (!Array.isArray(node.data)) {
          var para = {
            id: node.data.id
          }
          var res = await this.$ala.httpGet(this.apiUrl, para)
          if (res) {
            val = res
          }
        } else {
          val = []
        }
        resolve(val)
      },
      async getNode (data, node) {
        var para = {
          id: data.id
        }
        var res = await this.$ala.httpGet(this.apiUrl, para)
        var _this = this
        if (res) {
          if (res.length > 0) {
            this.$nextTick(() => {
              _this.getTreeUrl(_this.data, res, data.id)
            })
          } else {
            this.$message.warning('此分类没有数据')
          }
        }
      },
      getTreeUrl (data, list, id) {
        if (data !== null) {
          data.forEach((element, index) => {
            if (element.id === id) {
              this.expanded.push(id)
              this.$set(element, 'children', list)
            } else if (element.children) {
              this.getTreeUrl(element.children, list, id)
            }
          })
        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  [v-cloak] {
    display: none !important;
  }
  .admin-user-tree {
    .admin-user-tree_container {
      padding: 0px 20px;
      padding-bottom: 20px;
    }
    .el-loading-mask {
      height: 600px;
    }
  }
</style>


